<template>
  <view class="quest">
    <view class="quest-demand">
      <text class="after">基本资料</text>
      <view class="quest-id">
        <text
          >资料编号：<text style="color: #000">{{ categoryList.id }}</text></text
        >
        <img
          src="@/static/images/copy.png"
          alt=""
          @click="copy('资料编号：' + categoryList.id)"
          style="height: 40rpx"
        />
      </view>
      <view class="quest-id">
        <text
          >订单编号：<text style="color: #000">{{ categoryList.jId }}</text></text
        >
        <img
          src="@/static/images/copy.png"
          alt=""
          @click="copy('订单编号：' + categoryList.jId)"
          style="height: 40rpx"
        />
      </view>
      <view
        >提交时间：<text style="color: #000">{{ categoryList.createdTime }}</text></view
      >
      <view
        >审核时间：<text style="color: #000">{{ categoryList.checkedTime }}</text></view
      >
      <view
        >审核状态：
        <uni-tag :inverted="true" text="已完成" v-if="categoryList.status == 20" type="success" />
        <uni-tag :inverted="true" text="待处理" v-if="categoryList.status == 10" />
        <uni-tag :inverted="true" text="已拒绝" type="error" v-if="categoryList.status == 99" />
      </view>
      <view
        >任务单价：<text style="color: #000">￥ {{ categoryList.price }}</text></view
      >
      <view
        >实际到账：<text style="color: red; font-weight: bold"
          >￥ {{ categoryList.income }}</text
        ></view
      >
      <view
        >审核说明：<text style="color: #000">{{ categoryList.checkedMsg }}</text></view
      >
    </view>
    <view class="quest-description">
      <text class="after">提交内容</text>
      <view style="color: #000" v-html="categoryList.commitContent"></view>
    </view>
    <view class="quest-description">
      <text class="after">提交附件</text>
      <view class="imglist" v-for="(item, index) in categoryList.url">
        <view class="imgbox" @click="previewimg(item)">
          <view>{{ item }}</view>
          <img src="@/static/images/previewimg.png" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { submitget } from '@/services/home'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const categoryList = ref<any>({})
const getHomeCategoryData = async () => {
  const currentPage = getCurrentPages().pop()
  const id = currentPage?.$page.options.id
  const res = await submitget({ id: id })
  if (res.success) {
    categoryList.value = res.data
    categoryList.value.url = JSON.parse(res.data.commitFiles || '[]').map(
      (obj: { LinkUrl: any }) => obj.LinkUrl,
    )
  }
}
const previewimg = (url: any) => {
  uni.previewImage({
    urls: [url],
  })
}
const copy = async (id: any) => {
  try {
    await navigator.clipboard.writeText(id)
    uni.showToast({ title: '复制成功！' })
  } catch (err) {
    uni.showToast({ title: '复制失败：' + err })
  }
}
onLoad(async () => {
  await getHomeCategoryData()
})
</script>

<style lang="scss">
.imglist {
  background-color: #fff;
  border-radius: 10rpx;

  .imgbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    margin-top: 0 !important;
    border-bottom: 1px solid #eee;
    color: #999;
    img {
      height: 40rpx;
    }
    view {
      margin-top: 0 !important;
      white-space: nowrap;
      /* 强制文本在一行显示 */
      overflow: hidden;
      /* 隐藏超出容器的内容 */
      text-overflow: ellipsis;
      width: 80%;
    }
  }
}
.button {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 38rpx;
  font-size: 20rpx;
  line-height: 40rpx;
  color: #fff;
  background-color: #1e9fff;
  white-space: nowrap;
}

.quest {
  min-height: 90vh;
  padding: 20rpx;
  padding-bottom: 100rpx;
  background-color: #f7f7f7;
  font-size: 24rpx;
  color: #999;

  .quest-title {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 10rpx;

    .quest-title-top {
      color: #000;
      font-size: 26rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .quest-title-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .quest-id {
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .quest-demand,
  .quest-description {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;

    .after {
      font-size: 28rpx;
      color: #000;
      position: relative;
      padding-left: 20rpx;
    }

    .after::after {
      content: '';
      position: absolute;
      left: 0rpx;
      top: 20%;
      height: 60%;
      border: 1px solid #00bb99;
    }

    view {
      margin-top: 30rpx;
    }
  }
}
</style>
